<template>
  <div
    class="pr scrollbar"
    style="
      width: 24vw;
      height: 100%;
      display: inline-block;
      padding: 0 10px;
      white-space: nowrap;
    "
  >
    <div
      class="pa fss"
      style="
        z-index: 10;
        flex-direction: row-reverse;
        width: calc(100% - 10px);
        padding-right: 10px;
      "
    >
      <timerRange v-model="flag" :kvs="kvs" ref="timerRange" />
    </div>
    <div
      id="echart1"
      style="
        width: calc(24vw - 20px);
        height: calc((100vh - 78px - 3vw) / 3);
        margin-left: 10px;
      "
    ></div>

    <ProductTagViewList
      :filters="filters"
      :sub_title="sub_title"
      v-model="dialog_visible"
    />
  </div>
</template>

<script>
import { init, graphic } from "echarts";
import { getColumns } from "../../../generate";
import { calcTimeDiffFormatter, sum, num_split } from "../../../utils";
import ProductTagViewList from "./ProductTagViewList.vue";

export default {
  name: "box1",
  components: {
    ProductTagViewList,
  },
  data: function () {
    return {
      flag: 2,
      kvs: [],
      dialog_visible: false,
      sub_title: null,
      filters: [],
      list: [],
    };
  },
  watch: {
    flag: {
      handler: "initCharts",
      immediate: true,
    },
  },
  myChart: null,
  async mounted() {
    // this.initItemSpan();
    this.columns = await getColumns("RepairViewListModel");
    this.initCharts();
  },
  methods: {
    calcTimeDiffFormatter,
    async initCharts() {
      let self = this;
      // const data = await this.$http.get(
      //   `/api/RepairReport/RepairLargeScreenModelJList?flag=${this.flag}`
      // );

      let data = [
        {
          Id: "D0557279AF574EF3BC77720F5",
          Name: "影像科",
          Amount: 147179073.0,
        },
        { Id: "381045A0857349578E25F27FA", Name: "麻醉科", Amount: 79682097.0 },
        {
          Id: "F94B3055570C49BAB034A805E",
          Name: "消化内镜中心",
          Amount: 56530369.0,
        },
        { Id: "EBFCC614D01346729EF2580C8", Name: "检验科", Amount: 48733925.0 },
        {
          Id: "7FFA7A77104949278A4DEA6E5",
          Name: "脊柱骨病科住院",
          Amount: 46568602.38,
        },
        {
          Id: "B09940EB27B842078945251DC",
          Name: "神经外科住院",
          Amount: 37024814.0,
        },
        { Id: "4FA7C79A51C6485FAE160C890", Name: "手术室", Amount: 35891147.0 },
        { Id: "47DE8784629B4A758AB86D49B", Name: "超声科", Amount: 29073242.0 },
        {
          Id: "2DB1EA6054AB4E4BA4EDC2C7F",
          Name: "重症医学科（ICU）",
          Amount: 26093030.0,
        },
        {
          Id: "D3F03922ABC64BDFA34231121",
          Name: "血液肿瘤科住院",
          Amount: 24785449.0,
        },
        {
          Id: "1509F0E8195F4E09A9A4B95FE",
          Name: "消毒供应中心",
          Amount: 23873193.0,
        },
        {
          Id: "87A97BD28FE24C5CB0BB1BA4F",
          Name: "耳鼻咽喉头颈外科住院",
          Amount: 23465304.6,
        },
        {
          Id: "D23D55357EE94638B636C65DC",
          Name: "耳鼻咽喉头颈外科门诊",
          Amount: 23261830.9,
        },
        {
          Id: "C2B7788D46DC44629A766333F",
          Name: "急诊科",
          Amount: 20847461.63,
        },
        {
          Id: "EA85D5F871924947A76F4ED2F",
          Name: "眼科门诊",
          Amount: 20728025.0,
        },
        {
          Id: "8E6944604E624334AD807C598",
          Name: "口腔科门诊",
          Amount: 19452337.4,
        },
        { Id: "DF877CCDB3E44FD8926438946", Name: "病理科", Amount: 16407450.0 },
        {
          Id: "342D30D243BB4829B6779829D",
          Name: "泌尿外科住院",
          Amount: 15881202.0,
        },
        {
          Id: "CEA82F87BF1446A3B260206B2",
          Name: "心血管内科住院",
          Amount: 14605811.0,
        },
        {
          Id: "5B25CEE1040F4BBCB87262FC0",
          Name: "新生儿科住院",
          Amount: 14384729.0,
        },
        {
          Id: "045657916A7E4AAFA2C09BC8C",
          Name: "呼吸内科住院",
          Amount: 14022973.0,
        },
        {
          Id: "AA4ED403EA554F8C9310E1F9C",
          Name: "教学科研部",
          Amount: 13838480.0,
        },
        {
          Id: "1B19352C9DB94EE9AF42538A2",
          Name: "皮肤科门诊",
          Amount: 13121710.5,
        },
        {
          Id: "4C93BFB59BAF44F089C505542",
          Name: "妇科住院",
          Amount: 11807544.0,
        },
        { Id: null, Name: "其他", Amount: 10757860.5 },
        {
          Id: "34A4D6D0ADF54BE6A12E0A2EC",
          Name: "血液透析室",
          Amount: 10271824.0,
        },
        {
          Id: "B09525445AE140598B432854A",
          Name: "产科住院",
          Amount: 9519090.0,
        },
        {
          Id: "EE671A3F7A2F4578969076F97",
          Name: "肝胆外科住院",
          Amount: 8866521.0,
        },
        {
          Id: "5BCD2D05C9AF4331858660014",
          Name: "眼科住院",
          Amount: 8585931.5,
        },
        {
          Id: "FC2C9D62290447638CC6AC4EF",
          Name: "感染科门诊",
          Amount: 8186939.0,
        },
        {
          Id: "3D4E492E67074FAB933487C86",
          Name: "康复科门诊",
          Amount: 7048468.0,
        },
        {
          Id: "F3867642194745A88BB902417",
          Name: "胸心外科住院",
          Amount: 6849010.5,
        },
        {
          Id: "77F6FF2774E84378BF7E91829",
          Name: "门诊药房",
          Amount: 6048600.0,
        },
        {
          Id: "EA492E71774949F48124228DD",
          Name: "关节创伤科住院",
          Amount: 5205945.5,
        },
        {
          Id: "FBCC93B26C8F44408E0B4E0EA",
          Name: "体检科门诊",
          Amount: 5071720.0,
        },
        {
          Id: "0D015F77D9874DC593CBC6085",
          Name: "普外科住院",
          Amount: 4449486.0,
        },
        {
          Id: "D0E913C0EFA142B3B72978423",
          Name: "神经内科住院",
          Amount: 4145844.0,
        },
        {
          Id: "A13F42D1C0524FA096A75D147",
          Name: "口腔科住院",
          Amount: 3780245.0,
        },
        { Id: "257D7AA85B844479AAF8EB6F3", Name: "输血科", Amount: 3748402.0 },
        {
          Id: "6126E9169A694C8995C950895",
          Name: "呼吸内科门诊",
          Amount: 3359136.5,
        },
        {
          Id: "701D6101DE874053A07103B5D",
          Name: "住院药房",
          Amount: 2561411.0,
        },
        {
          Id: "237C9E83D9E64A24973FBE873",
          Name: "功能检查中心",
          Amount: 2372044.0,
        },
        {
          Id: "B40159E037E544E5BB3E70ACB",
          Name: "儿科住院",
          Amount: 2224985.0,
        },
        {
          Id: "5598E308A65B4E2FB9305268E",
          Name: "内分泌代谢病科住院",
          Amount: 2208687.0,
        },
        {
          Id: "B838B2931E074FBDA77224B23",
          Name: "儿科门诊",
          Amount: 1651350.0,
        },
        {
          Id: "E47715DD802A4391AFCF66607",
          Name: "妇科门诊",
          Amount: 1564445.0,
        },
        {
          Id: "E46B787D113A4950837394F64",
          Name: "整形美容科门诊",
          Amount: 1515800.0,
        },
        {
          Id: "679EEAAE03254F41B080EFB8D",
          Name: "消化内科住院",
          Amount: 1503430.0,
        },
        {
          Id: "DC3D2520F06E4A779D113C86A",
          Name: "肾脏病科住院",
          Amount: 1446414.0,
        },
        {
          Id: "815555124B6E445D8ACBC84CC",
          Name: "血管外科住院",
          Amount: 1325240.0,
        },
        {
          Id: "1406C5B7632C488C9635CA38C",
          Name: "后勤安保部",
          Amount: 1034734.0,
        },
        {
          Id: "C2FCEC06EC0747E2BAAB85746",
          Name: "国际医学中心住院",
          Amount: 878774.0,
        },
        {
          Id: "2CF6FBC832D546F28D5DE3F35",
          Name: "中医科门诊",
          Amount: 639361.0,
        },
        {
          Id: "FC0298556CD740688CA9EA0E6",
          Name: "心血管内科门诊",
          Amount: 521900.0,
        },
        {
          Id: "3CBA5C72A23848B2BB1C070BF",
          Name: "临床营养科门诊",
          Amount: 365050.0,
        },
        { Id: "AE2A1DA6C6E4414582B3F70DF", Name: "MDT门诊", Amount: 319132.0 },
        {
          Id: "904D481A4A06469B9A0A05C57",
          Name: "信息技术部",
          Amount: 303800.0,
        },
        { Id: "BDC345ACC8864594A6FC4B97B", Name: "门诊部", Amount: 287400.0 },
        {
          Id: "C0C8888E75684744A3229C2BA",
          Name: "中心实验室",
          Amount: 221713.0,
        },
        {
          Id: "8CE2A961AB0D4734B6CFAC748",
          Name: "整形美容科住院",
          Amount: 221500.0,
        },
        {
          Id: "47DA4A90AAB44B8DA244CF8C4",
          Name: "神经内科门诊",
          Amount: 165950.0,
        },
        { Id: "DEF997E0015C4D61B0BFA8DA7", Name: "产科门诊", Amount: 155166.0 },
        {
          Id: "2D85F5C4F43A4DB3A6AD0BA30",
          Name: "医学工程部",
          Amount: 101100.0,
        },
        { Id: "1AFCE82B86554070912CEB0A8", Name: "医务部", Amount: 75800.0 },
        {
          Id: "4735BA2421A8426EBE718F879",
          Name: "普外科门诊",
          Amount: 47452.0,
        },
        {
          Id: "689B6E51CD584AE18AAF574F2",
          Name: "泌尿外科门诊",
          Amount: 42666.0,
        },
        {
          Id: "708D5771D0974BC2AD672E23E",
          Name: "神经外科门诊",
          Amount: 32780.0,
        },
        {
          Id: "4EC6A778DAFE476FBFF298C82",
          Name: "脊柱骨病科门诊",
          Amount: 25711.0,
        },
        {
          Id: "242278045A0E485C8540130E0",
          Name: "肾脏病科门诊",
          Amount: 25274.0,
        },
        {
          Id: "774118746FA24F84B49D21CC9",
          Name: "呼吸微创介入诊治中心",
          Amount: 23760.0,
        },
        { Id: "5B325C78CDDC4044A0D523BCA", Name: "财务部", Amount: 12640.0 },
        {
          Id: "78927511C9334011983E452C8",
          Name: "胸心外科门诊",
          Amount: 11011.0,
        },
        { Id: "289D6B7C9B9548F696E9A322A", Name: "护理部", Amount: 9411.0 },
        {
          Id: "9D5DC75774DF42648BF570BD8",
          Name: "关节创伤科门诊",
          Amount: 9211.0,
        },
        {
          Id: "0B074C6BEDA4436DA49EA07BD",
          Name: "消化内科门诊",
          Amount: 8500.0,
        },
        { Id: "B86089B73BCE46C59CC4FFA4C", Name: "全科门诊", Amount: 6511.0 },
        {
          Id: "C1CF225788FB4DDCA0651A260",
          Name: "血管外科门诊",
          Amount: 3600.0,
        },
        {
          Id: "38E6A6F8F8FE4EC2853B4099A",
          Name: "内分泌代谢病科门诊",
          Amount: 3600.0,
        },
        { Id: "6E291E4C214641758AD797205", Name: "党政办公室", Amount: 3600.0 },
        {
          Id: "23AE0B3FFD144F3997EC8D75A",
          Name: "血液肿瘤科门诊",
          Amount: 3600.0,
        },
        {
          Id: "EBBB05B3CA6544FB82CB68DA8",
          Name: "肝胆外科门诊",
          Amount: 3600.0,
        },
        { Id: "7DDF061D48E24FC3B1A3F9AE6", Name: "麻醉门诊", Amount: 1800.0 },
      ];

      this.list = data.map((v) => ({
        ...v,
        Amount2: parseFloat((v.Amount / 10000).toFixed(2)),
      }));

      this.list = this.list.sort((x, y) => x.Amount - y.Amount);

      if (!this.myChart) {
        this.myChart = init(document.getElementById("echart1"));
        this.myChart.on("click", (ev) => {
          let { data, name } = ev;
          let Id = self.list.filter((x) => x.Name == name).map((x) => x.Id)[0];

          this.filters = [
            {
              Name: "Dept_Id",
              compare: "==",
              value: Id,
            },
          ];
          this.sub_title = `${name}设备资产情况(${data}万元)`;
          this.dialog_visible = true;
        });
      }

      const len = this.list.length;

      const option = {
        grid: {
          top: 45,
          bottom: 10,
          left: 0,
          right: 105,
        },
        yAxis: [
          {
            type: "category",
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: {
              show: true,
              inside: true,
              padding: [0, 0, 10, 0],
              color: "#fff",
              margin: 0,
              align: "left",
              verticalAlign: "bottom",
              fontSize: 14,
            },
            data: this.list.map((i) => i.Name),
          },
        ],
        xAxis: {
          show: false,
        },
        dataZoom: [
          {
            type: "slider",
            // realtime: true,
            width: 8,
            top: 45,
            bottom: 20,
            // height: "80%", //组件高度
            right: 10, //右边的距离
            yAxisIndex: [0],
            show: this.list.length > 6, // 是否展示
            borderCap: "round",
            orient: "vertical",
            fillerColor: "#00876c", // 滚动条颜色
            backgroundColor: "#02231d",
            borderColor: "none",
            handleSize: 8, //两边手柄尺寸
            handleIcon:
              "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z",
            handleStyle: {
              color: "#00876c",
              borderWidth: 0,
            },
            showDetail: false, //拖拽时是否展示滚动条两侧的文字
            zoomLock: true, //是否只平移不缩放
            moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
            zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
            showDataShadow: false,
            brushSelect: false,
            start: 100,
            end: Math.floor(((len - 5) / len).toFixed(3) * 100),
            // startValue: 0,
            // endValue: 5,
            // minValueSpan: 5,
            maxValueSpan: 5,
          },
          {
            type: "inside", // 支持内部鼠标滚动平移
            orient: "vertical",
            zoomOnMouseWheel: false, // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
          },
        ],
        series: [
          {
            type: "bar",
            name: "设备资产情况",
            barWidth: 10,
            barGap: 30,
            itemStyle: {
              normal: {
                color: new graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0,
                  [
                    { offset: 0, color: "#03a98a" },
                    { offset: 1, color: "#25527d" },
                  ],
                  false
                ),
                opacity: 1,
              },
            },
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
              formatter: (e) => num_split(e.data || 0, 2) + "万元",
            },
            data: this.list.map((i) => i.Amount2 || 0),
          },
        ],
        textStyle: {
          fontFamily: "AP",
        },
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    resize() {
      this.myChart.resize();
    },
  },
  computed: {
    total() {
      try {
        let value = parseFloat(sum(this.list.map((x) => x.Amount2)).toFixed(2));

        return num_split(value, 2);
      } catch {
        return 0;
      }
    },
  },
};
</script>

<style scoped>
.item {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  flex: 1;
  padding-right: 5px;
  color: #fff;
}

.col1,
.col2,
.col3 {
  /* flex: 1; */
}
</style>